﻿<script lang="ts" name="commodityinformation" setup>
import { ref, reactive, onMounted } from "vue";
import { ElMessage } from "element-plus";
import type { FormRules } from "element-plus";
import { formatDate } from '/@/utils/formatTime';
import { useCommodityinformationApi } from '/@/api/Merchandisemanagement/commodityinformation';
import { listenerCount } from "process";
import { auth } from '/@/utils/authFunction';
import { useWarehouseApi } from '/@/api/Warehousemanagement/warehouse';
const warehouseApi = useWarehouseApi();
//父级传递来的函数，用于回调
const emit = defineEmits(["reloadTable"]);
const commodityinformationApi = useCommodityinformationApi();
const ruleFormRef = ref();
const gettablelist=ref([])as any;
const page=ref({
  page: 1,
  pageSize: 20,
  total: 0,
  field: 'createTime', // 默认的排序字段
  order: 'descending', // 排序方向
  descStr: 'descending', // 降序排序的关键字符
})as any;

const tableData = ref([]) as any;
const exportCommodityinformation =async () => {
  state.tableLoading = true;
  page.value = Object.assign(page.value);
  const result = await warehouseApi.page(Object.assign(page.value)).then(res => res.data.result);
  page.value.total = result?.total;
  tableData.value = result?.items ?? [];
  state.tableLoading = false;
}

const state = reactive({
	title: '',
	loading: false,
	showDialog: false,
	ruleForm: {} as any,
	stores: {},
	dropdownData: {} as any,
});

// 自行添加其他规则
const rules = ref<FormRules>({
  userID: [{required: true, message: '请选择客户名称！', trigger: 'blur',},],
  vendorID: [{required: true, message: '请选择供应商！', trigger: 'blur',},],
});

// 页面加载时
onMounted(async () => {
  const data = await commodityinformationApi.getDropdownData(false).then(res => res.data.result) ?? {};
  state.dropdownData.goodsID = data.goodsID ?? [];
  state.dropdownData.primaryunit = data.primaryunit ?? [];
  state.dropdownData.userID = data.userID ?? [];
  state.dropdownData.vendorID = data.vendorID ?? [];
});

// 打开弹窗
const openDialog = async (row: any, title: string) => {
	state.title = title;
	row = row ?? {  };
	state.ruleForm = row.id ? await commodityinformationApi.detail(row.id).then(res => res.data.result) : JSON.parse(JSON.stringify(row));
	state.showDialog = true;
};
const checked1=ref(false);
// 关闭弹窗
const closeDialog = () => {
	emit("reloadTable");
	state.showDialog = false;
};
const auxiliary=ref({
	list:[],
	tablelist:[]
}	
)as any;

// 提交
const submit = async () => {
	state.ruleForm.auxiliaryUnits=JSON.stringify(auxiliary.value.list);
	state.ruleForm.inventoryList=JSON.stringify(auxiliary.value.tablelist);
	ruleFormRef.value.validate(async (isValid: boolean, fields?: any) => {
		if (isValid) {
			let values = state.ruleForm;
			await commodityinformationApi[state.ruleForm.id ? 'update' : 'add'](values);
			closeDialog();
		} else {
			ElMessage({
				message: `表单有${Object.keys(fields).length}处验证失败，请修改后再提交`,
				type: "error",
			});
		}
	});
};
const addaddWarehouseopenDialog=ref(false);
const addWarehouse=()=>{
addaddWarehouseopenDialog.value=true
}

//将属性或者函数暴露给父组件
defineExpose({ openDialog,addWarehouse });
</script>
<template>
	<div class="commodityinformation-container">
		<el-dialog v-model="state.showDialog" :width="1700" draggable :close-on-click-modal="false" >
			<template #header>
				<div style="color: #fff">
					<span>{{ state.title }}</span>
				</div>
			</template>
			<el-form :model="state.ruleForm" ref="ruleFormRef" label-width="auto" :rules="rules">
				<el-row :gutter="35">
					<el-form-item v-show="false">
						<el-input v-model="state.ruleForm.id" />
					</el-form-item>
					<el-card  shadow="hover" class="mb20"  style="width: 100%">
    <template #header>基础信息</template>
	<el-row :gutter="35">
    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20" >
						<el-form-item label="货品名称" prop="itemName">
							<el-input v-model="state.ruleForm.itemName" placeholder="请输入货品名称" maxlength="32" show-word-limit clearable />
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20" >
						<el-form-item label="货品编号" prop="itemCode">
							<el-input v-model="state.ruleForm.itemCode" placeholder="请输入货品编号" maxlength="32" show-word-limit clearable />
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20" >
						<el-form-item label="货品类型" prop="goodsID">
							<el-select clearable filterable v-model="state.ruleForm.goodsID" placeholder="请选择货品类型">
								<el-option v-for="(item,index) in state.dropdownData.goodsID" :key="index" :value="item.value" :label="item.label" />
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20" >
						<el-form-item label="规格型号" prop="specifications">
							<el-input v-model="state.ruleForm.specifications" placeholder="请输入规格型号" maxlength="32" show-word-limit clearable />
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20" >
						<el-form-item label="供应商" prop="vendorID">
							<el-select clearable filterable v-model="state.ruleForm.vendorID" placeholder="请选择供应商">
								<el-option v-for="(item,index) in state.dropdownData.vendorID" :key="index" :value="item.value" :label="item.label" />
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20" >
						<el-form-item label="客户名称" prop="userID">
							<el-select clearable filterable v-model="state.ruleForm.userID" placeholder="请选择客户名称">
								<el-option v-for="(item,index) in state.dropdownData.userID" :key="index" :value="item.value" :label="item.label" />
							</el-select>
						</el-form-item>
					</el-col>
					
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20" >
						<el-form-item label="入库参考价/元" prop="enterPrice">
							<el-input-number v-model="state.ruleForm.enterPrice" placeholder="请输入入库参考价/元" clearable />
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20" >
						<el-form-item label="出库参考价/元" prop="gooutPrice">
							<el-input-number v-model="state.ruleForm.gooutPrice" placeholder="请输入出库参考价/元" clearable />
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20" >
						<el-form-item label="显示顺序" prop="displayOrder">
							<el-input-number v-model="state.ruleForm.displayOrder" placeholder="请输入显示顺序" clearable />
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20" >
						<el-form-item label="状态" prop="state">
							<el-switch v-model="state.ruleForm.state" active-text="是" inactive-text="否" />
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20" >
						<el-form-item label="保质期管理" prop="shelfManagement">
							<el-switch v-model="state.ruleForm.shelfManagement" active-text="是" inactive-text="否" />
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20" v-show="state.ruleForm.shelfManagement==true">
						<el-form-item label="保质期" prop="shelflife">
							<el-input-number v-model="state.ruleForm.shelflife" placeholder="请输入保质期" clearable style="margin-right: 10px;width: 180px"/>
							<el-input v-model="state.ruleForm.shelfUnits" placeholder="请输入保质期单位" maxlength="32" show-word-limit clearable style="width: 180px"/>
						</el-form-item>
					</el-col>
					
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20" v-show="state.ruleForm.shelfManagement==true">
						<el-form-item label="预警天数（天）" prop="earlywarning">
							<el-input-number v-model="state.ruleForm.earlywarning" placeholder="请输入预警天数（天）" clearable />
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20" >
						<el-form-item label="备注" prop="remark">
							<el-input type="textarea" v-model="state.ruleForm.remark" placeholder="请输入备注" maxlength="200" show-word-limit clearable />
						</el-form-item>
					</el-col>
					</el-row>
  </el-card>
					



					<el-card style="width: 100%" shadow="hover" class="mb20">
    <template #header>单位管理</template>
	<el-row :gutter="35">
    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20" >
		
						<el-form-item label="启用多单位" prop="multiUnitEnabled">
							<el-switch v-model="state.ruleForm.multiUnitEnabled" active-text="是" inactive-text="否" />
						</el-form-item>
					</el-col>
						<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20" ></el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20" >
						<el-form-item label="主单位" prop="primaryunit">
							<el-select clearable filterable v-model="state.ruleForm.primaryunit" placeholder="请选择主单位">
								<el-option v-for="(item,index) in state.dropdownData.primaryunit" :key="index" :value="item.value" :label="item.label" />
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20" >
						<el-form-item label="条码" prop="primaryunitBarcode">
							<el-input v-model="state.ruleForm.primaryunitBarcode" placeholder="请输入条码" maxlength="32" show-word-limit clearable />
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="4" :md="4" :lg="4" :xl="4" class="mb20" v-show="state.ruleForm.multiUnitEnabled===true">
						<el-form-item label="辅助单位" prop="auxiliaryUnits">
							<el-select clearable filterable v-model="auxiliary.list.unit" placeholder="请选择辅助单位">
								<el-option v-for="(item,index) in state.dropdownData.primaryunit" :key="index" :value="item.value" :label="item.label" />
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="6" :md="6" :lg="6" :xl="6" class="mb20" v-show="state.ruleForm.multiUnitEnabled===true">
						
						<el-form-item label="" prop="primaryunitBarcode">
							<el-input v-model="auxiliary.list.count" placeholder="请输入"  show-word-limit clearable >
								<template #append>
									<el-button type="primary" @click="addAuxiliary">瓶</el-button>
								</template>
							</el-input>
							
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="6" :md="6" :lg="6" :xl="6" class="mb20" v-show="state.ruleForm.multiUnitEnabled===true">
						<el-form-item label="" prop="primaryunitBarcode">
							<el-input v-model="auxiliary.list.count" placeholder="请输入"  show-word-limit clearable >
								<template #append>
									<el-button type="success" @click="addAuxiliary" style="color: #5cb85c;">生成条码</el-button>
								</template>
							</el-input>							
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="6" :md="6" :lg="6" :xl="6" class="mb20" v-show="state.ruleForm.multiUnitEnabled===true">
						<el-button type="info" @click="deleteAuxiliary" >+</el-button>
						<el-button type="info" @click="deleteAuxiliary" >-</el-button>
					</el-col>
					</el-row>
  </el-card>
					<el-card style="width: 100%" shadow="hover" class="mb20">
    <template #header>
		<div style="display: flex; justify-content: space-between; align-items: center;">
        <div style="width: 80px; height: 100%; line-height: 40px;">库存信息</div>
        <div style="width: 80px; height: 100%; line-height: 40px;">
          <el-checkbox v-model="checked1" label="初始化仓库" size="large" />
        </div>
      </div>
	</template>
    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20" >
		<el-button type="primary" @click="addWarehouse">添加</el-button>
		<el-button type="primary" >移除</el-button>
          <el-table :data="auxiliary.tablelist" border style="width: 1000px;margin-top: 20px;">
            <el-table-column prop="index" label="序号"  align="center">
            </el-table-column>
            <el-table-column prop="warehouse" label="期初仓库"  align="center">
              <template #default="scope">
                <el-input v-model="scope.row.warehouse" placeholder="请输入"></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="initialInventory" label="期初库存"  align="center" v-show="checked1">
              <template #default="scope">
                <el-input v-model="scope.row.initialInventory" placeholder="请输入"></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="upperLimit" label="库存上限"  align="center">
              <template #default="scope">
                <el-input v-model="scope.row.upperLimit" placeholder="请输入"></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="lowerLimit" label="库存下限"  align="center">
              <template #default="scope">
                <el-input v-model="scope.row.lowerLimit" placeholder="请输入"></el-input>
              </template>
            </el-table-column>
			<el-table-column prop="remark" label="备注"  align="center">
              <template #default="scope">
                <el-input v-model="scope.row.remark" placeholder="请输入"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="操作"  align="center">
              <template #default="scope">
                <el-button type="danger" size="small" @click="removeInventoryRow(scope.$index)">移除</el-button>
              </template>
            </el-table-column>
          </el-table>
						
					</el-col>
  </el-card>
					<el-card style="width: 100%" shadow="hover" class="mb20">
    <template #header>上传图片</template>
   <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20" >
						<el-form-item label="上传图片" prop="uploadImage">
							<el-input v-model="state.ruleForm.uploadImage" placeholder="请输入上传图片" maxlength="2000" show-word-limit clearable />
						</el-form-item>
					</el-col>
  </el-card>
					<el-card style="width: 100%" shadow="hover" class="mb20">
    <template #header>上传附件</template>
    <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20" >
						<el-form-item label="上传附件" prop="uploadAttachments">
							<el-input v-model="state.ruleForm.uploadAttachments" placeholder="请输入上传附件" maxlength="2000" show-word-limit clearable />
						</el-form-item>
					</el-col>
  </el-card>
					
					
				</el-row>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="() => state.showDialog = false">取 消</el-button>
					<el-button @click="submit" type="primary" v-reclick="1000">确 定</el-button>
				</span>
			</template>
		</el-dialog>
	</div>




	<el-dialog
    v-model="addaddWarehouseopenDialog"
    title="添加仓库"
    width="1500"
    :before-close="handleClose"
  >
    <el-table :data="tableData" @selection-change="(val: any[]) => { state.selectData = val; }" style="width: 100%" v-loading="state.tableLoading" tooltip-effect="light" row-key="id" @sort-change="sortChange" border>
        <el-table-column type="selection" width="40" align="center" v-if="auth('warehouse:batchDelete') || auth('warehouse:export')" />
        <el-table-column type="index" label="序号" width="55" align="center"/>
        <el-table-column prop='warehouseCode' label='仓库编号' show-overflow-tooltip />
        <el-table-column prop='warehouseName' label='仓库名称' show-overflow-tooltip />
        <el-table-column prop='capacity' label='仓库容量m³' show-overflow-tooltip />
        <el-table-column prop='addr' label='仓库地址' show-overflow-tooltip />
        <el-table-column prop='organizationID' label='组织ID' :formatter="(row: any) => row.organizationFkDisplayName" show-overflow-tooltip />
        <el-table-column prop='userID' label='用户ID' :formatter="(row: any) => row.userFkDisplayName" show-overflow-tooltip />
        <el-table-column prop='sort' label='排序' show-overflow-tooltip />
        <el-table-column prop='state' label='仓库状态' show-overflow-tooltip>
          <template #default="scope">
            <el-tag v-if="scope.row.state"> 是 </el-tag>
            <el-tag type="danger" v-else> 否 </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop='lock' label='仓库锁定' show-overflow-tooltip>
          <template #default="scope">
            <el-tag v-if="scope.row.lock"> 是 </el-tag>
            <el-tag type="danger" v-else> 否 </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop='remark' label='备注' show-overflow-tooltip />
       
        <el-table-column label="操作" width="140" align="center" fixed="right" show-overflow-tooltip v-if="auth('warehouse:update') || auth('warehouse:delete')">
          <template #default="scope">
            <el-button icon="ele-Edit" size="small" text type="primary" @click="editDialogRef.openDialog(scope.row, '编辑仓库管理')" v-auth="'warehouse:update'"> 编辑 </el-button>
            <el-button icon="ele-Delete" size="small" text type="primary" @click="delWarehouse(scope.row)" v-auth="'warehouse:delete'"> 删除 </el-button>
          </template>
        </el-table-column>
      </el-table>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">Cancel</el-button>
        <el-button type="primary" @click="dialogVisible = false">
          Confirm
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<style lang="scss" scoped>
:deep(.el-select), :deep(.el-input-number) {
  max-height: 70vh;
  overflow-y: auto;
}

</style>